<!--基础表格-->

<template>
  <div class="w-h-full">
    <table class="grid-table">
      <tr v-show="component.compConfigData.headerStyle.show">
        <th v-for="(row, index) in component.compConfigData.tableCols"
            :key="index"
            v-show="row.show"
            :style="{
              width: row.width > 0 ? row.width + 'px': 'auto',
              textAlign: component.compConfigData.headerStyle.textAlign,
              fontSize: component.compConfigData.headerStyle.fontSize + 'px',
              color: component.compConfigData.headerStyle.color,
              borderStyle: component.compConfigData.headerStyle.borderStyle,
              borderWidth: component.compConfigData.headerStyle.borderWidth + 'px',
              borderColor: component.compConfigData.headerStyle.borderColor,
              backgroundColor: component.compConfigData.headerStyle.backgroundColor,
              lineHeight: component.compConfigData.headerStyle.lineHeight + 'px'
            }">
          {{row.title}}
        </th>
      </tr>
      <tbody>
        <tr v-for="(item, index1) in pagination(
          pageNum,
          component.compConfigData.pager.pageSize,
          runCustomFilter(component.compConfigData.ds_resultObj))" :key="index1">
          <td v-for="(row, index2) in component.compConfigData.tableCols"
              :key="index2"
              v-show="row.show"
              :style="{
                textAlign: component.compConfigData.bodyStyle.textAlign,
                fontSize: component.compConfigData.bodyStyle.fontSize + 'px',
                color: component.compConfigData.bodyStyle.color,
                borderStyle: component.compConfigData.bodyStyle.borderStyle,
                borderWidth: component.compConfigData.bodyStyle.borderWidth + 'px',
                borderColor: component.compConfigData.bodyStyle.borderColor,
                backgroundColor: bodyTdBackgroundColor(index1),
                lineHeight: component.compConfigData.bodyStyle.lineHeight + 'px',
                paddingTop: component.compConfigData.bodyStyle.paddingTop + 'px',
                paddingRight: component.compConfigData.bodyStyle.paddingRight + 'px',
                paddingBottom: component.compConfigData.bodyStyle.paddingBottom + 'px',
                paddingLeft: component.compConfigData.bodyStyle.paddingLeft + 'px',
              }" @click="colClickHandler(item)">
            <span v-if="row.type == 'progress'">
              <vm-progress :percentage="item[row.field]"
                           :striped="row.progress.striped"
                           :type="row.progress.type"
                           :strokeWidth="row.progress.strokeWidth"
                           :strokeColor="row.progress.strokeColor"
                           :trackColor="row.progress.trackColor"
                           :text-inside="row.progress.textInside"
                           :width="row.progress.width"
                           :showText="row.progress.showText"
                           :reverse="row.progress.reverse">
                <span :style="{
                  color: row.progress.textColor,
                  fontSize: row.progress.textFontSize + 'px',
                  lineHeight: row.progress.strokeWidth + 'px'}">{{item[row.field]}}%</span>
              </vm-progress>
            </span>

            <span v-if="row.type == 'trend'">
              <Icon v-if="row.trend.showIcon" :style="{color: trendIconColor(row, item)}" :custom="'iconfont '+trendIcon(row, item)" :size="row.trend.iconSize"/>
              <span class="m-l-5px" :style="{color: row.trend.syncTextColor ? trendIconColor(row, item): component.compConfigData.bodyStyle.color}">
                <span v-html="item[row.field]"></span> {{row.trend.suffixText}}
              </span>
            </span>

            <span v-if="row.type == 'default'" v-html="item[row.field]"></span>

          </td>
        </tr>
        <tr v-if="runCustomFilter(component.compConfigData.ds_resultObj).length == 0">
          <td class="alert" :colspan="component.compConfigData.tableCols.length">
            暂无相关数据
          </td>
        </tr>
      </tbody>

    </table>

    <div v-show="component.compConfigData.pager.show" class="pager-wrapper float-right m-t-5px">
      <div class="pager-btn" :class="{'disable': pageNum == 1}"
           :style="{
             fontSize: component.compConfigData.pager.buttonStyle.fontSize + 'px',
             borderWidth: component.compConfigData.pager.buttonStyle.borderWidth + 'px',
             borderColor: component.compConfigData.pager.buttonStyle.borderColor,
             borderRadius: component.compConfigData.pager.buttonStyle.borderRadius + 'px',
             backgroundColor: component.compConfigData.pager.buttonStyle.backgroundColor,
             lineHeight: component.compConfigData.pager.buttonStyle.lineHeight + 'px',
             color: component.compConfigData.pager.buttonStyle.color,
             paddingTop: component.compConfigData.pager.buttonStyle.paddingTop + 'px',
             paddingRight: component.compConfigData.pager.buttonStyle.paddingRight + 'px',
             paddingBottom: component.compConfigData.pager.buttonStyle.paddingBottom + 'px',
             paddingLeft: component.compConfigData.pager.buttonStyle.paddingLeft + 'px'
           }" @click="prevPage">上一页</div>
      <div class="pager-detail"
           :style="{
             color: component.compConfigData.pager.pagerDetail.color,
             fontSize: component.compConfigData.pager.pagerDetail.fontSize + 'px',
           }">
        {{pageNum}} / {{Math.ceil(runCustomFilter(component.compConfigData.ds_resultObj).length/component.compConfigData.pager.pageSize)}}
      </div>
      <div class="pager-btn"
           :class="{'disable': pageNum == Math.ceil(runCustomFilter(component.compConfigData.ds_resultObj).length/component.compConfigData.pager.pageSize) || runCustomFilter(component.compConfigData.ds_resultObj).length == 0}"
           :style="{
             fontSize: component.compConfigData.pager.buttonStyle.fontSize + 'px',
             borderWidth: component.compConfigData.pager.buttonStyle.borderWidth + 'px',
             borderColor: component.compConfigData.pager.buttonStyle.borderColor,
             borderRadius: component.compConfigData.pager.buttonStyle.borderRadius + 'px',
             backgroundColor: component.compConfigData.pager.buttonStyle.backgroundColor,
             lineHeight: component.compConfigData.pager.buttonStyle.lineHeight + 'px',
             color: component.compConfigData.pager.buttonStyle.color,
             paddingTop: component.compConfigData.pager.buttonStyle.paddingTop + 'px',
             paddingRight: component.compConfigData.pager.buttonStyle.paddingRight + 'px',
             paddingBottom: component.compConfigData.pager.buttonStyle.paddingBottom + 'px',
             paddingLeft: component.compConfigData.pager.buttonStyle.paddingLeft + 'px'
           }"
           @click="nextPage">下一页</div>
    </div>
    <div class="clearfix"></div>

  </div>
</template>

<script>

  import Vue from 'vue'
  import Progress from 'vue-multiple-progress'
  Vue.use(Progress);

  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import PnDesigner from '@/utils/PnDesigner'

  import BaseTableComp from './BaseTableComp'
  import './iconfont/iconfont.css'

  const _this = {
    name: 'BaseTableComp',
    mixins: [FuncCompMixin],
    attr: {
      version: '2.1',
      configDataTemp: Object.assign({

        headerStyle: {
          show: true,
          textAlign: 'center',
          fontSize: 14,
          color: '#fff',
          borderStyle: 'solid',
          borderWidth: 1,
          borderColor: '#90caf9',
          backgroundColor: '#1e88e5',
          lineHeight: 30
        },

        bodyStyle: {
          textAlign: 'center',
          fontSize: 12,
          color: '#e3f2fd',
          borderStyle: 'solid',
          borderWidth: 1,
          borderColor: '#90caf9',
          backgroundColor: '#1976d2',
          lineHeight: 20,
          paddingTop: 5,
          paddingRight: 5,
          paddingBottom: 5,
          paddingLeft: 5,
          zebra: false, // 斑马纹
          zebraColor: 'rgba(0,181,255,0.5)',
        },

        tableCols: [
          {
            field: 'id',
            title: 'ID',
            width: 0,
            show: true,
            type: 'default',
            progress: BaseTableComp.buildProgressObj(),
            trend: BaseTableComp.buildTrendObj()
          },
          {
            field: 'name',
            title: '字符串',
            width: 0,
            show: true,
            type: 'default',
            progress: BaseTableComp.buildProgressObj(),
            trend: BaseTableComp.buildTrendObj()
          },
          {
            field: 'count',
            title: '趋势',
            width: 0,
            show: true,
            type: 'trend',
            progress: BaseTableComp.buildProgressObj(),
            trend: BaseTableComp.buildTrendObj()
          },
          {
            field: 'percent',
            title: '百分比',
            width: 0,
            show: true,
            type: 'progress',
            progress: BaseTableComp.buildProgressObj(),
            trend: BaseTableComp.buildTrendObj()
          }
        ],

        pager: {
          show: true,
          pageSize: 5,

          pagerDetail: {
            color: '#fff',
            fontSize: 12
          },
          buttonStyle: {
            fontSize: 12,
            borderWidth: 1,
            borderColor: '#bdbdbd',
            borderRadius: 0,
            backgroundColor: '#e0e0e0',
            lineHeight: 20,
            color: '#222',
            paddingTop: 0,
            paddingRight: 5,
            paddingBottom: 0,
            paddingLeft: 5
          }
        },

        rowClickHandleScript: ''

      }, PnDesigner.buildFuncCompDatasourceField({ // 如果组件需要配置数据源，则需要调用此函数构建数据源字段对象
        ds_resultObjTemplate: [
          {
            field: 'id',
            remark: 'ID'
          },
          {
            field: '...',
            remark: '...'
          }
        ],
        ds_resultObj: [
          {
            id: '1',
            name: '小明',
            count: 40,
            percent: 100
          },
          {
            id: '2',
            name: '小白',
            count: -12,
            percent: 66
          },
          {
            id: '3',
            name: '小丽',
            count: 130,
            percent: 88
          }
        ],
        ds_useFilter: true, // 是否使用过滤器，默认不使用
        ds_useTimer: true, // 是否开启定时器配置，默认不开启
      }), PnDesigner.buildFuncCompGlobalField(), PnDesigner.buildFuncCompInteractionConfiguration())
    },
    data() {
      return {
        pageNum: 1
      }
    },
    mounted() {
      this.init();

      this.setTimer(() => { //
        this.init()
      })
    },
    methods: {
      init () { // 组价初始化函数，函数名必须使用init，不可更改
        this.initDatasource(() => {
          this.runCustomGlobalJsCode()
        }, (result) => {
          this.runCustomGlobalJsCode()
        });
      },

      pagination (pageNum, pageSize, array) {
        let offset = (pageNum - 1) * pageSize;
        return (offset + pageSize >= array.length) ? array.slice(offset, array.length) : array.slice(offset, offset + pageSize);
      },

      prevPage () {
        if (this.pageNum > 1) {
          this.pageNum -= 1
        }
      },

      nextPage () {
        if (this.pageNum < Math.ceil(this.runCustomFilter(this.component.compConfigData.ds_resultObj).length/this.component.compConfigData.pager.pageSize)) {
          this.pageNum += 1
        }
      },

      bodyTdBackgroundColor (index) {
        // 偶数
        if (this.component.compConfigData.bodyStyle.zebra) {
          if (index % 2 ==0) {
            return this.component.compConfigData.bodyStyle.zebraColor
          }else {
            return this.component.compConfigData.bodyStyle.backgroundColor
          }
        }else {
          return this.component.compConfigData.bodyStyle.backgroundColor
        }
      },

      trendIconColor (row, item) {
        if (item[row.field] > row.trend.baseValue) {
          return row.trend.topColor
        }else if (item[row.field] == row.trend.baseValue) {
          return row.trend.equalColor
        }else {
          return row.trend.downColor
        }
      },

      trendIcon (row, item) {
        if (item[row.field] > row.trend.baseValue) {
          return 'icon-trend-top'
        }else if (item[row.field] == row.trend.baseValue) {
          return 'icon-trend-equal'
        }else {
          return 'icon-trend-down'
        }
      },

      colClickHandler (params) {
        eval(this.component.compConfigData.rowClickHandleScript)
      }

    },
    computed: {}
  };

  export default _this
</script>

<style lang="less" scoped>
  .ivu-progress .ivu-progress-inner {
    background-color: #bbdefb !important;
  }
  table.grid-table {
    width: 100%;
    /*border-width: 1px;*/
    /*border-color: #666666;*/
    border-collapse: collapse;
  }
  table.grid-table th {

  }
  table.grid-table td.alert {
    text-align: center;
    color: #fff;
    font-size: 13px;
    background-color: #1565c0;
    line-height: 50px;
  }
  table.grid-table.zebra tbody tr:nth-child(odd) {
    td {
      background-color: rgba(0,181,255,0.5) !important;
    }
  }

  .pager-wrapper {
    .pager-btn {
      display: inline-block;
      cursor: pointer;
      &.disable {
        cursor: not-allowed;
        opacity: .5;
      }
    }
    .pager-detail {
      display: inline-block;
      margin-left: 10px;
      margin-right: 10px;
    }
  }
</style>
